<template>
    <div class="bookrack-root">
        <div class="container">
            <BookrackCell
                class="book-box"
                v-for="b,i in books"
                :book="b"
            >
            </BookrackCell>
        </div>
    </div>
</template>

<script>
    import {mapState} from "vuex";
    import BookrackCell from "./BookrackCell.vue"
    export default {
        name: "Bookrack",
        components:{
            BookrackCell
        },
        computed:{
            ...mapState(["books"])
        }
    }
</script>

<style scoped lang="less">
    .bookrack-root{
        margin-bottom: @s48;
    }
    .container{
        background-image: url("/img/rack.png");
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position: 0 100%;
        height: (@s255 + 5vw);
    }
    .book-box{
        display: inline-block;
        /*border: 1px solid red;*/
        margin-left: 5.1vw;
        position: relative;
    }


</style>